import { addAds } from '@/services/ads';
import { getQueryParams } from '@/utils/utils';
import { Button, Form, Input, message, Modal, Select } from 'antd';
import styles from '../index.less';

type Props = {
  ifDelete: string;
  handleCancel: () => void;
  handleSeal: () => void;
  getList: () => void;
  goodsId: string;
};

const SealModal: React.FC<Props> = ({ ifDelete, getList, handleCancel, handleSeal, goodsId }) => {
  const qs = getQueryParams();
  const { Option } = Select;
  const [form] = Form.useForm();
  // const { RangePicker } = DatePicker;
  const colorThem = localStorage.getItem('color') || '#1a7721';

  //  广告推送时间仅能从今日以及今日之前开始
  // const disabledDate = (current: any) => {
  //   return current < moment().startOf('day');
  // };

  // form初始值
  const getInitValues = () => {
    return {
      wherePost: '1',
      money: 1000.0,
    };
  };
  const confirmSubmit = async (values: any) => {
    try {
      await addAds(values).then(() => {
        message.success('申请成功，待管理员审批！');
        getList();
      });
      handleCancel();
      form.setFieldsValue({
        // date: [],
        goodsid: '',
        flot: '',
        logisticsCompany: '中国邮政',
        logisticsCode: '',
      });
    } catch (error) {
      console.log(error);
    }
  };

  const onFinish = async () => {
    let values = await form.validateFields();
    values.saleId = qs.id;
    values.goodsId = goodsId;
    // values.timeStart = new Date(values.date[0]).getTime();
    // values.timeEnd = new Date(values.date[1]).getTime();

    Modal.confirm({
      title: '新建',
      centered: true,
      content: '请确认要提交的数据',
      okText: '确认',
      cancelText: '取消',
      onOk: () => confirmSubmit(values),
    });
  };

  const selectChange = (value: any) => {
    value === '1' ? form.setFieldValue('money', 1000) : form.setFieldValue('money', 500);
  };

  return ifDelete === '1' ? (
    <Modal
      open={true}
      footer={null}
      closable={false}
      onCancel={handleCancel}
      className={styles.modalsStyle}
      width={640}
      centered={true}
    >
      <Form
        onFinish={onFinish}
        form={form}
        className={styles.formStyle}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 40 }}
        initialValues={getInitValues()}
      >
        <Form.Item
          label="推送位置"
          name="wherePost"
          rules={[
            {
              required: true,
              message: (
                <div>
                  <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                  请选择物流公司
                </div>
              ),
            },
          ]}
        >
          <Select placeholder="请选择推送位置" onChange={selectChange}>
            <Option value="1">首页轮播图推送</Option>
            <Option value="2">首页商品推荐</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="花费金额"
          name="money"
          validateTrigger="onBlur"
          rules={[
            {
              required: true,
              message: (
                <div>
                  <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                  请选择推送位置（自动带入花费金额）
                </div>
              ),
            },
          ]}
        >
          <Input placeholder="请输入花费金额" autoComplete="off" disabled />
        </Form.Item>
        {/* <Form.Item
          label="起止日期"
          name="date"
          rules={[
            {
              required: true,
              message: (
                <div>
                  <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                  请选择起止日期
                </div>
              ),
            },
          ]}
        >
          <RangePicker showTime disabledDate={disabledDate} />
        </Form.Item> */}
      </Form>
      <div className={styles.btns}>
        <Button onClick={handleCancel} className={styles.btnCancel}>
          取消
        </Button>
        <Button
          onClick={onFinish}
          className={styles.btnSeal}
          style={{ background: `${colorThem}`, width: 120 }}
        >
          提交
        </Button>
      </div>
    </Modal>
  ) : (
    <Modal
      open={true}
      footer={null}
      closable={false}
      className={styles.modalStyle}
      onCancel={handleCancel}
      width={540}
      centered={true}
    >
      <div className={styles.modalContent}>
        <div className={styles.bigText}>确定删除吗？</div>
        <div className={styles.smallText}>
          选择确认，将删除当选行商品，并且不可恢复；选择取消，将不进行删除操作。
        </div>
      </div>
      <div className={styles.btns}>
        <Button onClick={handleCancel} className={styles.btnCancel}>
          取消
        </Button>
        <Button
          onClick={handleSeal}
          className={styles.btnSeal}
          style={{ background: `${colorThem}` }}
        >
          删除
        </Button>
      </div>
    </Modal>
  );
};

export default SealModal;
